<template>
  <TableWidget ref="assetTable" :pagination="pagination" :columns="props.columns" :load="loadData"
               :has-select="false" :hide-pageable="false" style="flex: 1"
               :show-zebra="true" :show-column="true" :show-refresh="false">
    <template v-slot:toolHeader>
      <TableSearchWidget ref="refSearch" :search="props.searchForms">
        <template v-slot:searchTail>
          <div style="display: flex; flex-direction: row;justify-content: center">
            <el-button icon="search" plain round style="padding: 0 20px;" @click="refresh"/>
            <el-button v-if="props.joinLabel" type="primary" round style="padding: 0 10px; margin-left: 16px;" @click="onJoinTarget">
              {{props.joinLabel}}
            </el-button>
            <slot name="actions" />
            <div v-if="props.comment" class="hold-comment">
              <el-icon  color="#6b66d4" style="margin-right: 2px;">
                <QuestionFilled />
              </el-icon>
              {{props.comment}}
            </div>
          </div>
        </template>
      </TableSearchWidget>
    </template>
    <template v-slot:actionBefore>
      <slot name="actionBefore"/>
    </template>
    <template v-slot:bottom>
      <slot name="bottom"/>
    </template>
  </TableWidget>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {QuestionFilled} from "@element-plus/icons-vue";

import TableWidget from "@/widget/TableWidget.vue";
import TableSearchWidget from "@/widget/TableSearchWidget.vue";

const refSearch = ref();
const assetTable = ref();

const props = withDefaults(defineProps<{
  columns: any,
  load?: any,
  joinTarget?: any,
  searchForms?: any,
  comment?: string,
  joinLabel?: string,
}>(), {});

const loadData = async (params: any) => {
  if (props.load) {
    return props.load(params);
  } else {
    return {
      code: -1,
      message: '功能未实现',
    }
  }
}

const onJoinTarget = async () => {
  if (props.joinTarget) {
    await props.joinTarget();
  }
}

const pagination = ref({
  current: 1,
  pageSize: 20,
  total: 0,
});

const refresh = async () => {
  await assetTable.value?.refreshData({
    ...refSearch.value?.getSearchParams()
  });
}

defineExpose({
  refresh,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.hold-comment {
  display: flex;
  flex: 1;
  align-items: center;
  margin-left: 32px;
  color: #6b66d4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
